const StatusMenu = imports.ui.statusMenu;
const PANEL_HEIGHT = 26;
-const TRAY_HEIGHT = PANEL_HEIGHT - 1;
const DEFAULT_PADDING = 4;
const PANEL_ICON_SIZE = 24;
-const BACKGROUND_TOP = new Clutter.Color();
-BACKGROUND_TOP.from_pixel(0x161616ff);
-const BACKGROUND_BOTTOM = new Clutter.Color();
-BACKGROUND_BOTTOM.from_pixel(0x000000ff);
-
-const PANEL_FOREGROUND_COLOR = new Clutter.Color();
-PANEL_FOREGROUND_COLOR.from_pixel(0xffffffff);
-const SN_BACKGROUND_COLOR = new Clutter.Color();
-SN_BACKGROUND_COLOR.from_pixel(0xffff00a0);
-
-const TRANSPARENT_COLOR = new Clutter.Color();
-TRANSPARENT_COLOR.from_pixel(0x00000000);
-
-// Don't make the mouse hover effect visible to the user for a menu feel.
-const PANEL_BUTTON_COLOR = new Clutter.Color();
-PANEL_BUTTON_COLOR.from_pixel(0x00000000);
-
-// Lighten pressed buttons; darkening has no effect on a black background.
-const PRESSED_BUTTON_BACKGROUND_COLOR = new Clutter.Color();
-PRESSED_BUTTON_BACKGROUND_COLOR.from_pixel(0x324c6ffa);
-
-const DEFAULT_FONT = 'Sans 16px';
-
-const TRAY_PADDING = 0;
// See comments around _recomputeTraySize
const TRAY_SPACING = 14;
const TRAY_SPACING_MIN = 8;
this._activeSequence = null;
this._startupSequences = {};
- this.actor = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- spacing: DEFAULT_PADDING,
- y_align: Big.BoxAlignment.CENTER });
- this._iconBox = new Big.Box({ width: PANEL_ICON_SIZE, height: PANEL_ICON_SIZE,
- x_align: Big.BoxAlignment.CENTER,
- y_align: Big.BoxAlignment.CENTER });
- this.actor.append(this._iconBox, Big.BoxPackFlags.NONE);
- let labelBox = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
- y_align: Big.BoxAlignment.CENTER });
- this._label = new Clutter.Text({ font_name: DEFAULT_FONT,
- color: PANEL_FOREGROUND_COLOR,
- text: "" });
- labelBox.append(this._label, Big.BoxPackFlags.EXPAND);
- this.actor.append(labelBox, Big.BoxPackFlags.NONE);
-
- this._startupBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- y_align: Big.BoxAlignment.CENTER });
- this.actor.append(this._startupBox, Big.BoxPackFlags.NONE);
+ this.actor = new St.BoxLayout({ name: 'appMenu' });
+ this._iconBox = new St.Bin({ name: 'appMenuIcon' });
+ this.actor.add(this._iconBox);
+ this._label = new St.Label();
+ this.actor.add(this._label, { expand: true, y_fill: false });
+
+ this._startupBox = new St.BoxLayout();
+ this.actor.add(this._startupBox);
Main.overview.connect('hiding', Lang.bind(this, function () {
this.actor.opacity = 255;
this._focusedApp = focusedApp;
this._activeSequence = lastSequence;
- this._iconBox.remove_all();
+ if (this._iconBox.child != null)
+ this._iconBox.child.destroy();
this._iconBox.hide();
this._label.set_text('');
if (this._focusedApp != null) {
let icon = this._focusedApp.create_icon_texture(PANEL_ICON_SIZE);
- this._iconBox.append(icon, Big.BoxPackFlags.NONE);
+ this._iconBox.set_child(icon);
this._iconBox.show();
let appName = this._focusedApp.get_name();
// Use _set_text to work around http://bugzilla.openedhand.com/show_bug.cgi?id=1851
this._label.set_text(appName);
} else if (this._activeSequence != null) {
let icon = this._activeSequence.create_icon(PANEL_ICON_SIZE);
- this._iconBox.append(icon, Big.BoxPackFlags.NONE);
+ this._iconBox.set_child(icon);
this._iconBox.show();
this._label.set_text(this._activeSequence.get_name());
}
Panel.prototype = {
_init : function() {
- this.actor = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL
- });
+ this.actor = new St.BoxLayout({ name: 'panel' });
this.actor._delegate = this;
- let backgroundGradient = Shell.create_vertical_gradient(BACKGROUND_TOP,
- BACKGROUND_BOTTOM);
- this.actor.connect('notify::allocation', Lang.bind(this, function () {
- let [width, height] = this.actor.get_size();
- backgroundGradient.set_size(width, height);
- }));
- this.actor.add_actor(backgroundGradient);
-
- this._leftBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- y_align: Big.BoxAlignment.CENTER,
- spacing: DEFAULT_PADDING,
- padding_right: DEFAULT_PADDING });
- this._centerBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- y_align: Big.BoxAlignment.CENTER });
- this._rightBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- y_align: Big.BoxAlignment.CENTER,
- padding_left: DEFAULT_PADDING });
+ this._leftBox = new St.BoxLayout({ name: 'panelLeft' });
+ this._centerBox = new St.BoxLayout({ name: 'panelCenter' });
+ this._rightBox = new St.BoxLayout({ name: 'panelRight' });
/* This box container ensures that the centerBox is positioned in the *absolute*
* center, but can be pushed aside if necessary. */
this._boxContainer = new Shell.GenericContainer();
- this.actor.append(this._boxContainer, Big.BoxPackFlags.EXPAND);
+ this.actor.add(this._boxContainer, { expand: true });
this._boxContainer.add_actor(this._leftBox);
this._boxContainer.add_actor(this._centerBox);
this._boxContainer.add_actor(this._rightBox);
/* Button on the left side of the panel. */
/* Translators: If there is no suitable word for "Activities" in your language, you can use the word for "Overview". */
let label = new St.Label({ text: _("Activities") });
- this.button = new St.Clickable({ name: 'panelActivities' });
+ this.button = new St.Clickable({ name: 'panelActivities',
+ style_class: 'panel-button',
+ reactive: true });
this.button.set_child(label);
this.button.height = PANEL_HEIGHT;
- this._leftBox.append(this.button, Big.BoxPackFlags.NONE);
+ this._leftBox.add(this.button);
// We use this flag to mark the case where the user has entered the
// hot corner and has not left both the hot corner and a surrounding
// multiple times due to an accidental jitter.
this._hotCornerEntered = false;
- this._hotCornerEnvirons = new Clutter.Rectangle({ width: 3,
+ this._hotCornerEnvirons = new Clutter.Rectangle({ x: 0,
+ y: 0,
+ width: 3,
height: 3,
opacity: 0,
reactive: true });
- this._hotCorner = new Clutter.Rectangle({ width: 1,
+ this._hotCorner = new Clutter.Rectangle({ x: 0,
+ y: 0,
+ width: 1,
height: 1,
opacity: 0,
reactive: true });
this._hotCorner.connect('leave-event',
Lang.bind(this, this._onHotCornerLeft));
- this._leftBox.append(this._hotCornerEnvirons, Big.BoxPackFlags.FIXED);
- this._leftBox.append(this._hotCorner, Big.BoxPackFlags.FIXED);
+ this._leftBox.add(this._hotCornerEnvirons);
+ this._leftBox.add(this._hotCorner);
let appMenu = new AppPanelMenu();
- this._leftBox.append(appMenu.actor, Big.BoxPackFlags.NONE);
+ this._leftBox.add(appMenu.actor);
/* center */
let clockButton = new St.Button({ style_class: "panel-button",
- toggle_mode: true });
- this._centerBox.append(clockButton, Big.BoxPackFlags.NONE);
+ toggle_mode: true,
+ x_fill: true,
+ y_fill: true });
+ this._centerBox.add(clockButton, { y_fill: false });
clockButton.connect('clicked', Lang.bind(this, this._toggleCalendar));
- this._clock = new Clutter.Text({ font_name: DEFAULT_FONT,
- color: PANEL_FOREGROUND_COLOR,
- text: "" });
- clockButton.add_actor(this._clock);
+ this._clock = new St.Label();
+ clockButton.set_child(this._clock);
this._calendarPopup = null;
// The tray icons live in trayBox within trayContainer.
// The trayBox is hidden when there are no tray icons.
let trayContainer = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
- y_align: Big.BoxAlignment.START });
- this._rightBox.append(trayContainer, Big.BoxPackFlags.NONE);
+ y_align: Big.BoxAlignment.CENTER });
+ this._rightBox.add(trayContainer);
let trayBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- height: TRAY_HEIGHT,
- padding: TRAY_PADDING,
+ height: PANEL_ICON_SIZE,
spacing: TRAY_SPACING });
this._trayBox = trayBox;
}));
this._traymanager.manage_stage(global.stage);
- let statusbox = new Big.Box();
let statusmenu = this._statusmenu = new StatusMenu.StatusMenu();
- statusbox.append(this._statusmenu.actor, Big.BoxPackFlags.NONE);
- let statusbutton = new Button.Button(statusbox,
- PANEL_BUTTON_COLOR,
- PRESSED_BUTTON_BACKGROUND_COLOR,
- PANEL_FOREGROUND_COLOR);
- statusbutton.actor.height = PANEL_HEIGHT;
- statusbutton.actor.connect('button-press-event', function (b, e) {
- if (e.get_button() == 1 && e.get_click_count() == 1) {
- statusmenu.toggle(e);
- // The statusmenu might not pop up if it couldn't get a pointer grab
- if (statusmenu.isActive())
- statusbutton.actor.active = true;
- return true;
- } else {
- return false;
- }
+ let statusbutton = new St.Clickable({ name: 'panelStatus',
+ style_class: 'panel-button',
+ reactive: true });
+ statusbutton.set_child(statusmenu.actor);
+ statusbutton.height = PANEL_HEIGHT;
+ statusbutton.connect('clicked', function (b, event) {
+ statusmenu.toggle(event);
+ // The statusmenu might not pop up if it couldn't get a pointer grab
+ if (statusmenu.isActive())
+ statusbutton.active = true;
+ return true;
});
- this._rightBox.append(statusbutton.actor, Big.BoxPackFlags.NONE);
+ this._rightBox.add(statusbutton);
// We get a deactivated event when the popup disappears
this._statusmenu.connect('deactivated', function (sm) {
- statusbutton.actor.active = false;
+ statusbutton.active = false;
});
// TODO: decide what to do with the rest of the panel in the Overview mode (make it fade-out, become non-reactive, etc.)
// We get into the Overview mode on button-press-event as opposed to button-release-event because eventually we'll probably
// have the Overview act like a menu that allows the user to release the mouse on the activity the user wants
// to switch to.
- this.button.connect('clicked', Lang.bind(this, function(b) {
- let event = Clutter.get_current_event();
+ this.button.connect('clicked', Lang.bind(this, function(b, event) {
if (!Main.overview.animationInProgress) {
this._maybeToggleOverviewOnClick();
return true;